import { lazy, Suspense, memo, useMemo, useEffect, useState, useRef } from 'react'
import LdMainContainer from '../../components/LdMainContainer'
import bus from '../../utils/eventBus'
const Queue = lazy(() => import('./components/Queue'))
const History = lazy(() => import('./components/History'))
const Print = memo((props: any) => {
    const menuList = useRef([
        { label: "打印队列", icon: "printQueue", hidden: false, key: "Queue", count: 0, },
        { label: "打印记录", icon: "printHistory", hidden: false, key: "History", count: 0, },
    ])
    const [defaultKey, setDefaultKey] = useState<string>('Queue')
    const handleRoute = (data: any) => {
        setDefaultKey(data.key)
    }
    const defaultActive = ()=>{
        setDefaultKey('Queue')
    }
    useEffect(()=>{
        bus.addListener('defaultActive',defaultActive)
    },[])
    useEffect(()=>{
        return ()=>{
            bus.removeListener('defaultActive',defaultActive)
        }
    },[])
    return (
        <>
            <LdMainContainer menus={menuList.current} defaultKey={defaultKey} change={handleRoute}>
                <Suspense>
                    {
                        defaultKey === 'Queue' ? <Queue /> : <History />
                    }
                </Suspense>
            </LdMainContainer>
        </>
    )
})
export default Print